<template>
	<view>
		<view class="cu-bar bg-white">
			<view class="action">
				<text class="cuIcon-titles text-orange"></text>
				<text class="text-xl text-bold">地址信息</text>
			</view>
		</view>
		<form>
			<view class="cu-form-group">
				<view class="title">收件人</view>
				<input v-model="formData.name" placeholder="请输入收件人姓名" name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">收件人年龄</view>
				<input v-model="formData.age" placeholder="请输入收件人年龄" name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">手机号码</view>
				<input v-model="formData.phone" placeholder="输入框带标签" name="input"></input>
				<view class="cu-capsule radius">
					<view class='cu-tag bg-orange '>
						+86
					</view>
					<view class="cu-tag line-orange">
						中国大陆
					</view>
				</view>
			</view>
			<view class="cu-form-group" @click="addressSelClick">
				<view v-model="formData.address" class="title">收货地址<text class="margin-left-sm">{{formData.address}}</text></view>
				<view class="cuIcon-right"></view>
			</view>
			<view class="cu-form-group">
				<view class="title">详细地址</view>
				<input v-model="formData.remark" placeholder="请输入详细地址" name="input"></input>
			</view>
		</form>
		
		<view class="cu-modal bottom-modal" :class="modalName=='ChooseModal'?'show':''" @tap="modalName = ''">
			<view class="cu-dialog" @tap.stop="">
				<view class="cu-bar bg-white">
					<view></view>
					<view class="action text-gray" @tap="modalName = ''">取消</view>
					<!-- <view class="action text-green" @tap="hideModal">确定</view> -->
				</view>
				<semp-city @confirm="onCityClick" platform="jd"></semp-city>
			</view>
		</view>
		<view class="myBar padding cu-bar tabbar shop" style="position: fixed; width: 750rpx; bottom: 20rpx;">
			<view class=" margin-lr bg-red submit cuIcon-add round padding-lr" @click="submit">保存</view>
		</view>

	</view>
</template>

<script>
	import addressApi from "../../../../api/new/addressApi"
import sempCity from "@/components/semp-city/semp-city.vue"
	export default {
		components: {
			sempCity
		},
		data() {
			return {
				modalName: "",
				address: "",
				formData: {
					name: "",
					age: "",
					phone: "",
					address: "",
					mr: "",
					remark: ""
				}
			}
		},
		onLoad(options) {
			this.id = options.id
			if (this.id) {
				this.init()
			}
		},
		methods: {
			init() {
				addressApi.addressDetail({id: this.id}).then(res => {
					this.formData = res.data
				})
			},
			onCityClick(e) {
				this.provinceName = e.province.label;
				this.cityName = e.city.label;
				this.countyName = e.county.label;
				this.townName = e.town.label;
				this.formData.address = this.provinceName + " " + this.cityName + " " + this.countyName + " " + this.townName
				this.modalName = ""
			},
			addressSelClick() {
				this.modalName = "ChooseModal"
			},
			submit() {
				if (!this.formData.name) {
					uni.showToast({
						title: "请输入姓名",
						icon: "none"
					})
					return
				}
				if (!this.formData.age) {
					uni.showToast({
						title: "请输入年龄",
						icon: "none"
					})
					return
				}
				if (!this.formData.phone) {
					uni.showToast({
						title: "请输入手机号码",
						icon: "none"
					})
					return
				}
				if (!this.formData.address) {
					uni.showToast({
						title: "请选择收货地址",
						icon: "none"
					})
					return
				}
				if (!this.formData.remark) {
					uni.showToast({
						title: "请输入详细地址",
						icon: "none"
					})
					return
				}
				if (this.id) {
					addressApi.editAddress({
						id: this.id,
						...this.formData
					}).then(res => {
						uni.showToast({
							title: res.msg
						})
						uni.navigateBack()
					})
				} else {
					addressApi.addAddress(this.formData).then(res => {
						uni.showToast({
							title: res.msg
						})
						uni.navigateBack()
					})
				}
			}
		}
	}
</script>

<style lang="scss">
</style>